<template>
	<view class="tab-bar">
		<view class="tab-item" v-for="(item,index) in tabBarList" :key="index" @tap="navigatorTo(item.url, index)">
			<!-- 判断是否有点击，如果没有就不是激活样式，点击就是激活的样式 -->
			<image class="imgsize" v-if="item.type == 0" :src="current == index ? item.selectIcon : item.icon" mode="widthFix"></image>
			<!-- 设置一个状态值（type），判断加号是否展示 -->
			<image class="addimgsize" v-if="item.type == 1" src="https://adb.ahaodian.cn/web/Shop/static/main_normal.png" mode="widthFix"></image>
			<view v-if="item.type == 0" class="text" :class="{active: current == index}">{{item.name}}</view>
			<view v-if="item.type == 1" class="center-text" :class="{active: current == index}">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabbar",
		props: {
		    current: {
		        type: Number,
				isSelected: true,
		        default: 0 //默认第一个页面tabbar激活
		    },
		},
		data() {
			return {
				tabBarList: [{
                        type: 0,
                        icon: "/static/img/工作台.png",
                        selectIcon: "/static/img/工作台-选中.png",
                        name: "工作台",
                        url: "/pages/workPlace/workPlace"
                    },
                    {
                        type: 0,
                        icon: "/static/img/公司产品.png",
                        selectIcon: "/static/img/公司产品-选中.png",
                        name: "公司产品",
                        url: "/pages/product/product"
                    },
                    {
                        type: 0,
                        icon: "/static/img/首营企业.png",
                        selectIcon: "/static/img/首营企业-选中.png",
                        name: "首营企业",
                        url: "/pages/company/company"
                    },
					{
					    type: 0,
					    icon:  "/static/img/首营商品.png",
					    selectIcon: "/static/img/首营商品-选中.png",
					    name: "首营商品",
					    url: "/pages/goods/goods"
					},
					{
					    type: 0,
					    icon: "/static/img/我的.png",
					    selectIcon: "/static/img/我的-选中.png",
					    name: "我的",
					    url: "/pages/my/my"
					},
                ],
			};
		},
		methods: {
			navigatorTo(url, index) {
				if (index === this.current) {
					return;
				}
				this.$Router.replaceAll(url)
			    // uni.redirectTo({
			    //     url: url,
			    // });
			},
		}
	}
</script>

<style>
.tab-bar {
    position: fixed;
    bottom: 0;
    height: 98rpx;
    background-color: #FFFFFF;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
	z-index: 99;
	-moz-box-shadow:0 0 20rpx #E5E5E5;
	-webkit-box-shadow:0 0 20rpx #E5E5E5;
	box-shadow:0 0 20rpx #E5E5E5;
}
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
	position: relative;
}

.imgsize {
    width: 44rpx;
    height: 44rpx;
}

.text {
    font-size: 24rpx;
	color: #999999;
	margin-top: 10rpx;
}

.center-text {
	font-size: 24rpx;
	color: #999999;
	margin-top: 8rpx;
}

.active {
	color: #0091ff;
}
</style>